<template>
  <q-splitter
      v-model="splitterModel"
      style="height: 550px"
    >
      <template v-slot:before>
        <q-tabs
          v-model="tab"
          vertical
          class="text-teal shadow-2"
        >
          <template v-for="menu in menuList" :key="menu.id">
            <q-tab
              :name="menu.name"
              :icon="menu.meta.icon"
            >
              <q-tooltip anchor="center right">{{menu.meta.title}}</q-tooltip>
            </q-tab>
          </template>
        </q-tabs>
      </template>
      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          transition-prev="slide-down"
          transition-next="slide-up"
        >
          <template v-for="menu in menuList" :key="menu.id">
            <q-tab-panel :name="menu.name">
              <q-list>
                <template v-for="item in menu.children" :key="item.id">
                  <q-item
                    clickable
                    v-ripple
                    @click="openMenu(item)"
                    active-class="my-menu-link"
                  >
                    <q-item-section avatar>
                      <q-icon color="primary" :name="item.meta.icon" />
                    </q-item-section>
                    <q-item-section>{{item.meta.title}}</q-item-section>
                  </q-item>
                </template>
              </q-list>
            </q-tab-panel>
          </template>
        </q-tab-panels>
      </template>

    </q-splitter>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, ref, watch, PropType } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CMenu, CRouteItem } from 'stores/model';
import AmyTreeItem from 'layouts/AmyTreeItem.vue';
import AmyDrawerItem from 'layouts/AmyDrawerItem.vue';
import { cataItem } from 'src/hook/common/useCatalogType';
import { useNavTabStore } from 'stores/navTabStore';

export default defineComponent({
  name: 'AmyMenuTabs',
  components: {
    AmyTreeItem,
    AmyDrawerItem
  },
  props: {
    menuList: {
      type: Array as PropType<CMenu[]>,
      require: true
    },
    projectList: {
      type: Array as PropType<cataItem[]>,
      require: () => {
        return []
      }
    },
    drawerList: {
      type: Array,
      require: () => {
        return []
      }
    }
  },

  setup (props, context) {
    //当前路由
    const route = useRoute();
    const router = useRouter();

    //store
    const navStore = useNavTabStore();

    let tab = ref('');
    let splitterModel = ref(20);

    //数据解构
    const {
      menuList,
      projectList,
      drawerList
    } = toRefs(props);

    //*******************************
    //      菜单模块
    //*******************************
    //路由跳转
    const openMenu = (u: CRouteItem) => {
      if (u.children && u.children.length > 0) {
        return;
      }

      // 路径不同就切换下
      if (u.path !== route.path) {
        router.push(u.path);
        navStore.addRouteTabs({
          name: u.meta.title,
          path: u.path
        });
      }
    }

    //当前菜单选中进入路由后状态
    const headerStyleActive = (m: CRouteItem) => {
      if (m.path !== '') {
        if (route.path === m.path) {
          return {
            color: '#1890ff'
          };
        }
      }
      return {};
    }

    //*******************************
    //      启动模块
    //*******************************
    watch(() => menuList, () => {
      //默认tabs
      if ((menuList.value) && (menuList.value.length > 0)) {
        tab.value = (menuList.value[0] as CMenu).name;
      }
    }, { immediate: true });

    onMounted(() => {

    })

    return {
      menuList,
      projectList,
      drawerList,
      tab,
      splitterModel,
      openMenu,
      headerStyleActive
    };
  }
});
</script>

<style lang="scss" scoped>
.my-menu-link {
  color: white;
  background: #F2C037;
}
</style>
